import { Descriptions, Card, Button } from 'antd'
import styles from './index.module.less'
import { useEffect, useState } from 'react'
import * as echarts from 'echarts'
import { useStore } from '@/store'
import { formatState, formatNum, formatMoney } from '@/utils'
import api from '@/api'
import { Dashboard } from '@/types/api'
import { useCharts } from '@/hook/useCharts'

function DashBoard() {
  const userInfo = useStore(state => state.userInfo)
  const [report, setReport] = useState<Dashboard.ReportData>()

  // 初始化折线图
  const [lineRef, lineChart] = useCharts()
  // 初始化饼图
  const [pieCityRef, pieCityChart] = useCharts()
  const [pieAgeRef, pieAgeChart] = useCharts()
  // 初始化雷达图
  const [radarRef, radarChart] = useCharts()

  useEffect(() => {
    renderLineChart()
    renderPieCity()
    renderPieAge()
    renderRadarChart()

    const radarChartDom = document.getElementById('radarChart')
    const radarChartInstance = echarts.init(radarChartDom as HTMLElement)
    radarChartInstance.setOption({
      title: {
        text: '司机模型分布'
      },
      legend: {
        data: ['司机模型诊断']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '服务态度', max: 300 },
          { name: '在线时长', max: 300 },
          { name: '接单率', max: 300 },
          { name: '评分', max: 300 },
          { name: '关注度', max: 300 }
        ]
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: [
            {
              value: [8, 300, 80, 4, 9],
              name: '司机模型诊断'
            }
          ]
        }
      ]
    })
  }, [lineChart, pieCityChart, pieAgeChart, radarChart])

  // 加载折线图数据
  const renderLineChart = async () => {
    if (!lineChart) {
      return
    }
    const data = await api.getLineData()
    lineChart?.setOption({
      title: {
        text: '订单和流水走势图'
      },
      tooltip: {},
      legend: {
        data: ['订单', '流水']
      },
      xAxis: {
        data: data.label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '订单',
          type: 'line',
          data: data.order
        },
        {
          name: '流水',
          type: 'line',
          data: data.money
        }
      ]
    })
  }
  // 加载饼图数据
  const renderPieCity = async () => {
    if (!pieCityChart) {
      return
    }
    const data = await api.getPieCityData()
    pieCityChart?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {},
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '50%',
          // center: ['50%', '50%'],
          data: data
        }
      ]
    })
  }
  const renderPieAge = async () => {
    if (!pieAgeChart) {
      return
    }
    const data = await api.getPieAgeData()
    pieAgeChart?.setOption({
      title: {
        text: '司机城市分布',
        left: 'center'
      },
      tooltip: {},
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '城市分布',
          type: 'pie',
          radius: '50%',
          // center: ['50%', '50%'],
          data: data
        }
      ]
    })
  }
  // 加载雷达图
  const renderRadarChart = async () => {
    if (!radarChart) {
      return
    }
    const data = await api.getRadarData()
    radarChart?.setOption({
      title: {
        text: '司机模型分布'
      },
      legend: {
        data: ['司机模型诊断']
      },
      radar: {
        // shape: 'circle',
        indicator: data.indicator
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: data.data
        }
      ]
    })
  }

  const renderPieRefresh = async () => {
    renderPieCity()
    renderPieAge()
  }

  useEffect(() => {
    getReportData()
  }, [])

  const getReportData = async () => {
    const data = await api.getReportData()
    setReport(data)
  }

  return (
    <div className={styles.dashboard}>
      <div className={styles.userInfo}>
        <img src={userInfo.userImg} className={styles.userImg} />
        <Descriptions title='欢迎新同学，每天都要开心'>
          <Descriptions.Item label='用户ID'>{userInfo.userId}</Descriptions.Item>
          <Descriptions.Item label='邮箱'>{userInfo.userEmail}</Descriptions.Item>
          <Descriptions.Item label='状态'>{formatState(userInfo.state)}</Descriptions.Item>
          <Descriptions.Item label='手机号'>{userInfo.mobile}</Descriptions.Item>
          <Descriptions.Item label='岗位'>{userInfo.job}</Descriptions.Item>
          <Descriptions.Item label='部门'>{userInfo.deptName}</Descriptions.Item>
        </Descriptions>
      </div>
      <div className={styles.report}>
        <div className={styles.card}>
          <div className='title'>司机数量</div>
          <div className={styles.data}>{formatNum(report?.driverCount)}个</div>
        </div>
        <div className={styles.card}>
          <div className='title'>总流水</div>
          <div className={styles.data}>{formatMoney(report?.totalMoney)}元</div>
        </div>
        <div className={styles.card}>
          <div className='title'>总订单</div>
          <div className={styles.data}>{formatNum(report?.orderCount)}单</div>
        </div>
        <div className={styles.card}>
          <div className='title'>开通城市</div>
          <div className={styles.data}>{formatNum(report?.cityNum)}座</div>
        </div>
      </div>
      <div className={styles.chart}>
        <Card
          title='订单和流水走势图'
          extra={
            <Button type='primary' onClick={renderLineChart}>
              刷新
            </Button>
          }
        >
          <div ref={lineRef} className={styles.itemChart} id='lineChart'></div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='司机分布'
          extra={
            <Button type='primary' onClick={renderPieRefresh}>
              刷新
            </Button>
          }
        >
          <div className={styles.pieChart}>
            <div ref={pieCityRef} className={styles.itemPie} id='pieChartCity'></div>
            <div ref={pieAgeRef} className={styles.itemPie} id='pieChartAge'></div>
          </div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          title='模型诊断'
          extra={
            <Button type='primary' onClick={renderRadarChart}>
              刷新
            </Button>
          }
        >
          <div ref={radarRef} className={styles.itemChart} id='radarChart'></div>
        </Card>
      </div>
    </div>
  )
}

export default DashBoard
